<script setup lang="ts">
	import { ref, computed, reactive, unref, onMounted } from 'vue'
	import { throttle, test } from '@/uni_modules/uview-plus/index.js'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { modifyPassword, sendForgetSms } from '@/api/login/index'
	import { useUserStore } from '@/stores/user'
	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	// 验证码
	const codeEl = ref<any>(null)
	const useCode = () => {
		const codeTips = ref('获取验证码')
		const codeChange = (text : string) => {
			codeTips.value = text
		}

		const disabledCodeButton = computed(() => !unref(formData).mobile)
		const getCode = async () => {
			if (disabledCodeButton.value) {
				showNotify({
					type: 'error',
					message: '请先填写手机号',
				})
				return false
			}
			if (!codeEl.value.canGetCode) {
				showNotify({
					type: 'error',
					message: '请在60秒后重新获取',
				})
				return false
			}
			const params = {
				mobile: unref(formData)['mobile'],
				sms_type: 2
			}
			try {
				codeEl.value.start()
				await sendForgetSms(params)
			} catch (err : any) {
				showNotify({
					type: 'error',
					message: err.msg,
				})
			}
		}
		return {
			codeChange,
			getCode,
			codeTips,
			disabledCodeButton
		}
	}
	const { codeTips, codeChange, getCode, disabledCodeButton } = useCode()

	// 表单
	const formEl = ref<any>(null)
	const useForm = () => {
		type FormData = {
			mobile : string,
			password ?: string,
			code ?: string
		}
		const formData = ref<FormData>({
			mobile: '',
			password: '',
			code: ''
		})

		const rules = reactive({
			mobile: [
				{
					validator: (_ : any, value : string) => {
						return test.mobile(value);
					},
					message: '请输入手机号',
					trigger: ['blur'],
				}
			],
			password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			}],
			code: [{
				required: true,
				message: '请输入验证码',
				trigger: 'blur'
			}]
		})

		// #ifdef MP-WEIXIN
		onMounted(() => {
			formEl.value.setRules(rules)
		})
		// #endif

		const { onLogin } = useUserStore()
		const submit = () => {
			const params = {
				...unref(formData)
			}
			formEl.value.validate()
				.then(async (valid : boolean) => {
					if (valid) {
						try {
							const res = await modifyPassword(params)
							onLogin({ userInfo: res.data, token: res.data.token })
							uni.reLaunch({
								url: '/pages/Login/login'
							})
						} catch (err) {
							showNotify({
								type: 'error',
								message: err.msg
							})
						}
					}
				})
				.catch((err : any) => {
					showNotify({
						type: 'error',
						message: err[0].message
					})
				})
		}
		return {
			formData,
			rules,
			submit
		}
	}
	const { formData, rules, submit } = useForm()

	const MenuButtonBoundingClientRect = computed(() => uni.getMenuButtonBoundingClientRect())
	const cssVar = computed(() => {
		return {
			menuButtonTop: `--menu-button-top: ${unref(MenuButtonBoundingClientRect).top}px`
		}
	})

	const toLogin = () => {
		uni.redirectTo({
			url: '/pages/Login/login'
		})
	}
</script>
<template>
	<view class="content">
		<view class="title" :style="cssVar['menuButtonTop']">
			<text>忘记密码</text>
		</view>
		<view class="logo">
			<image src="/static/img/login_bg.png" style="width: 168rpx;height: 156rpx;"></image>
		</view>
		<view class="form_wrap">
			<u--form :model="formData" :rules="rules" ref="formEl" errorType="none">
				<u-form-item prop="mobile">
					<view class="form_item">
						<u--input v-model="formData.mobile" border="none" placeholder="请输入手机号">
						</u--input>
					</view>
				</u-form-item>
				<u-form-item prop="code">
					<view class="form_item">
						<u-input v-model="formData.code" border="none" placeholder="验证码">
							<template #suffix>
								<up-code ref="codeEl" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
								<up-button @tap="getCode" :text="codeTips" type="text"
									:disabled="disabledCodeButton"></up-button>
							</template>
						</u-input>
					</view>
				</u-form-item>
				<u-form-item prop="password">
					<view class="form_item">
						<u--input v-model="formData.password" border="none" placeholder="请输入密码" type="password">
						</u--input>
					</view>
				</u-form-item>
			</u--form>
			<view class="btn_wrap">
				<button class="submit_btn" @tap="throttle(submit, 500, false)">确认修改</button>
				<text class="reset_passwords" @tap="toLogin">返回登录</text>
			</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>
<style scoped lang="scss">
	.content {
		position: relative;
		top: 0;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 40rpx;
		background-color: #FFFFFF;

		.title {
			padding-top: var(--menu-button-top);
			font-size: 56rpx;
			font-weight: 700;
			color: rgba(39, 38, 41, 1);

		}

		.logo {
			width: 100%;
			height: 156rpx;
			text-align: center;
			margin: 80rpx 0;
		}

		.form_wrap {
			width: 100%;
			margin-top: 60rpx;
			box-sizing: border-box;

			.platform {
				margin: 10px 0;
			}

			.form_item {
				@include flex();
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 104rpx;
				border-radius: 60rpx;
				background: #F5F5F5;
				box-sizing: border-box;
				padding: 0 32rpx 0 64rpx;
			}

			.btn_wrap {
				width: 100%;
				margin-top: 80rpx;

				.submit_btn {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					color: #FFFFFF;
					border-radius: 50rpx;
					background-color: $u-primary;
				}

				.reset_passwords {
					display: block;
					font-size: 28rpx;
					color: rgba(156, 154, 161, 1);
					margin-top: 32rpx;
					text-align: center;

				}
			}
		}
	}
</style>